<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue-2.6.12开发.js"></script>
    <style>

    </style>
</head>

<body>
    <!-- 
        条件渲染:
            1.v-if
                写法:
                    (1).v-if='表达式'
                    (2).v-else-if='表达式'
                    (3).v-else='表达式'
                适用于:切换频率较低的场景
                特点:不展示dom元素直接被移除掉
                注意:v-if可以和 v-else-if 、 v-else 一起使用 但要求结构不可被打断
            2.v-show
                写法:
                    (1).v-show='表达式'
                适用于:切换频率较高的场景
                特点:不展示dom元素但dom元素未被移除 底层实现原理就是display=

            3.备注:
            (1).使用v-if时候 元素可能无法获取到 而使用v-show一定可以获取到(就还是两者的特点导致的v-if都把html结构删了当然就获取不到了)
            (2).template标签会在解析完毕后自动销毁不会存在在html结构里
            (3).template只能配合v-if使用 不能和v-show使用 
         
    -->



    <div id="root">
        <!-- 使用v-show做条件渲染 -->
        <!-- <h1 v-show='false'> {{name}}</h1> -->
        <!-- <h1 v-show='1===1'> {{name}}</h1> -->

        <!-- 使用v-if做条件渲染 -->
        <!-- <h1 v-if='false'> {{name}}</h1> -->
        <!-- <h1 v-if='1===1'> {{name}}</h1> -->

        <!-- v-else 和 v-else-if -->
        <button @click="n++">点我n+1</button>
        <div v-if="n===1">刘亦菲</div>
        <div v-else-if="n===2">陈宝莲</div>
        <!-- if多层判断不可被打断 否则报错  -->
        <!-- <div>@</div> -->
        <div v-else-if="n===3">张柏芝</div>
        <div v-else>哈哈都是我的</div>

        <!-- 一下渲染三个h2  -->
        <!--1.太过麻烦 -->
        <!-- <h2 v-if="true">1</h2>
        <h2 v-if="true">2</h2>
        <h2 v-if="true">3</h2> -->
        <!-- 2.多了一个div影响了结构 -->
        <!-- <div v-if="true">
            <h2>1</h2>
            <h2>2</h2>
            <h2>3</h2>
        </div> -->
        <!-- 完美做法 template标签会在解析完毕后自动销毁不会存在在html结构里 -->
        <!-- 注意:template只能配合v-if使用 不能和v-show使用 -->
        <template v-if="n===1">
            <h2>1</h2>
            <h2>2</h2>
            <h2>3</h2>
        </template>



    </div>
    <script>
        // if (n === 1) {
        //     console.log(1);
        // } else if (n === 1) {
        // }
        const vm = new Vue({
            el: '#root',
            data: {
                name: '刘亦菲YYds',
                n: 0,
            }
        })
    </script>
</body>

</html>